<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-25
        	描述：
        -->
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css"  href="../../../base/plugins/layui/css/layui.css" media="all"/>
	</head>
	<body>
		<blockquote class="site-text layui-elem-quote">
		   <h3>角色列表管理</h3>
		</blockquote>
		 	
		<div class="layui-row">
			<div class="layui-col-md5">
				<button class="layui-btn add">添加角色</button>
				<button class="layui-btn layui-btn-danger">批量删除</button>
			</div>
			<div class="layui-col-md7">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名称</label>
					<div class="layui-input-inline">
						<input type="text" name="password"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn">搜索</button>
				</div>
			</div>
			<hr/>
			<div class="layui-row">
				<form class="layui-form" action="#">
				<table class="layui-table">
					<colgroup>
					<col width="20">
					<col width="120">
					<col width="190">
					<col width="120">
					<col width="200">
					<col width="200">	    
					</colgroup>
					<thead>
						<tr>
						    <th><input type="checkbox"></th>
						    <th>角色名称</th>
						    <th>角色描述</th>
						    <th>更新人</th>
						    <th>更新时间</th>
						    <th>操作</th>
						</tr> 
					</thead>
					<tbody>
						<tr>
						    <td><input type="checkbox"></td>
						    <td>zhangsan</td>
						    <td>张三</td>
						    <td>1866</td>
						    <td>2016-11-29</td>
						    <td>
						      	<button class="layui-btn layui-btn-xs bianji">编辑</button>
						      	<button class="layui-btn layui-btn-xs  layui-btn-danger">删除</button>
						    </td>
						</tr>
						
						<tr>
						    <td><input type="checkbox"></td>
						    <td>zhangsan</td>
						    <td>张三</td>
						    <td>1866</td>
						    <td>2016-11-29</td>
						    <td>
						      	<button class="layui-btn layui-btn-xs bianji">编辑</button>
						      	<button class="layui-btn layui-btn-xs  layui-btn-danger">删除</button>
						    </td>
						</tr> 
					</tbody>
				</table>
				</form>
				
			</div>
			
		 </div>
		 
		 
		<script type="text/javascript" src="../../../base/js/jquery-1.11.3.min.js"> </script>
		<script type="text/javascript" src="../../../base/plugins/layui/layui.js"></script>
		<script  type="text/javascript">
			layui.use(['element','form'], function() {
			var element = layui.element;
			var form = layui.form;
		    form.render();
		    
		    
		    
		        
		    $(".add").click(function(){
		      	
                var index = layer.open({
						type : 2,
						content : 'roleadd.html',
						title : false,
						maxmin:true,
						closeBtn : 1
				});
				layer.full(index);  		      	
		       /*  <!-- 这个是layui的弹框界面的做法 -->
		        * layer.open({
		       			type:2,
		       			title:'layer mobile',
		       			shadeClose:true,
		       			shade:0.8,
		       			area:['800px','90%'],
		       			content:'roleadd.html'
		       	});*/
		       });
		       
		    $(".bianji").click(function(){
		      	var index = layer.open({
						type : 2,
						content : 'rolebianji.html',
						title : false,
						maxmin:true,
						closeBtn : 1
				});
				layer.full(index);  
		      	
		       	/*layer.open({
		       			type:2,
		       			title:'layer mobile',
		       			shadeClose:true,
		       			shade:0.8,
		       			area:['800px','90%'],
		       			content:'rolebianji.html'
		       	});*/
		       });
			});
		</script>
	</body>
</html>
